<template>
  <div class="container">
    <div class="pay_title">
      <div class="pay_lf">
        <div class="pay_logo"><img src="/images/logo.png" alt="" /></div>
        <div class="pay_text">
          <a href="">支付订单</a>
        </div>
      </div>
      <div class="pay_rg">
        <div class="pay_username" v-show="name">{{ name }}</div>
        <span>|</span>
        <div class="pay_username" v-show="name">
          <a @click="toOrderCenter">订单中心</a>
        </div>
      </div>
    </div>
    <div class="pay-content">
      <div class="pay-detail">
        <div class="pay-top">
          <div class="pay-logo">
            <img src="/images/pay-logo.png" alt="" />
          </div>
          <div class="pay-desc">
            <h2>订单提交成功!去付款咯~</h2>
            <div class="desc-content">
              请在<span>0小时30分</span>内完成支付，超时后将取消订单
            </div>
            <div class="desc-info">收货信息:{{ orderInfo }}</div>
          </div>
          <div class="pay-right">
            <div class="pay-price">
              应付金额:
              <span>{{ totalPrice }}</span>
              元
            </div>
            <div class="order-desc">订单详情</div>
          </div>
        </div>
        <div class="line"></div>
        <div class="order-detail">
          <!-- 订单号 -->
          <div class="order-num">
            订单号：<span>{{ orderId }}</span>
          </div>
          <!-- 收货信息 -->
          <div class="order-info">
            收货信息:
            <span>{{ orderInfo }}</span>
          </div>
          <!-- 商品名称 -->
          <div class="order-name">
            商品名称:
            <div class="order-info">
              <ul>
                <li v-for="(item, index) in selectProducrt" :key="index">
                  <img :src="item.s_good.s_goods_photos[0].path" alt="" />
                  {{ item.s_good.name }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 发票信息 -->
          <div class="ticket">发票信息: <span>电子发票 个人</span></div>
        </div>
      </div>
      <div class="pay-method">
        <div class="pay-tips"><span>请选择以下支付方式付款</span></div>
        <div class="line"></div>

        <div class="pay-type">
          <div class="pay-title">支付平台</div>
          <div class="pay-box">
            <ul>
              <li
                class="ali-pay"
                :class="{ checked: flag == 1 }"
                @click="flag = 1"
              >
                <img src="/images/ali-pay.png" alt="" />
              </li>
              <li
                class="weixin-pay"
                :class="{ checked: flag == 2 }"
                @click="flag = 2"
              >
                <img src="/images/weixin-pay.png" alt="" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import { mapActions, mapState, mapMutations } from "vuex";
import { getOrder } from "../assets/js/request";
export default {
  data() {
    return {
      orderlist: [],
      orderId: "",
      orderInfo: "",
      totalPrice: "",
      selectProducrt: JSON.parse(sessionStorage.getItem("selectCart")) || [],
      flag: false,
      flag: 0,
    };
  },
  computed: {
    ...mapState(["name"]),
  },
  created() {
    this.getOrderInfo();
  },
  methods: {
    ...mapActions(["SaveUsername"]),

    getOrderInfo() {
      let id = this.$route.query.id;
      getOrder(id).then((res) => {
        console.log(res);
        this.orderId = res.order_id;
        this.orderInfo = `${res.s_address.name} ${res.s_address.phone}${res.s_address.area_name} ${res.s_address.desc}`;
        this.totalPrice = this.$route.query.totalPrice;
      });
    },
    // async getOrderInfo() {
    //   let res = await getOrder();
    //   console.log(res);
    //   // console.log(this.selectProducrt);
    // },
    toOrderCenter() {
      this.$router.push({
        path: "/orderCenter",
      });
    },
  },
  components: {
    Footer,
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/config.scss";
@import "../assets/scss/reset.scss";
.pay_title {
  width: 100%;
  height: 100px;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  .pay_lf {
    position: absolute;
    left: 15%;
    // display: inline-block;
    float: left;
    display: block;
    .pay_logo {
      margin: 20px 0;
      float: left;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .pay_text {
      height: 100px;
      float: left;
      margin: 0 auto;
      a {
        display: block;
        margin: 0 auto;
        font-size: 22px;
        color: black;
        margin: 30px 10px;
      }
    }
    .pay_tips {
      display: inline-block;
      width: 300px;
      height: 30px;
      margin: 0 auto;
      float: left;
      margin: 35px 0px;
      font-size: 14px;
      color: #666;
      a {
        color: #666;
      }
    }
  }
  .pay_rg {
    float: right;
    position: absolute;
    margin: 35px 0;
    right: 15%;
    display: flex;
    .pay_username {
      margin: 0 5px;
      a {
        color: black;
      }
    }
  }
}
.pay-content {
  border-top: 1px solid #ff6700;
  width: 100%;
  background-color: #f5f5f5;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  .pay-detail {
    width: 80%;
    background-color: white;
    margin: 20px auto;
    .pay-top {
      margin-bottom: 150px;
      .pay-logo {
        // width: 100px;
        float: left;
        height: 150px;
        img {
          width: 80px;
          height: 80px;
          margin: 30px 50px;
        }
      }
      .pay-desc {
        width: 400px;
        float: left;
        margin: 25px;
        line-height: 30px;
        text-align: left;
        span {
          color: #ff6700;
        }
      }
      .pay-right {
        width: 150px;
        float: right;
        margin: 30px;
        line-height: 30px;
        .pay-price span {
          font-size: 24px;
          color: #ff6700;
        }
      }
    }
    .line {
      width: 80%;
      // height: 1px;
      border: 1px solid #f5f5f5;
      margin: 10px auto;
    }
    .order-detail {
      margin: 20px 150px;
      float: left;
      text-align: left;
      line-height: 30px;

      span {
        padding-left: 10px;
      }
      .order-num span {
        color: #ff6700;
      }
      .order-info {
        display: inline-block;
        ul {
          display: flex;
          li {
            margin-left: 20px;
            img {
              width: 35px;
              height: 25px;
            }
          }
        }
      }
    }
  }
  .pay-method {
    width: 80%;
    margin: 0 auto;
    background-color: white;
  }

  .pay-tips {
    padding-bottom: 40px;
    border-bottom: 1px solid #f5f5f5;

    span {
      float: left;
      padding: 10px 55px;
    }
  }

  .pay-type {
    width: 80%;
    height: 200px;
    .pay-title {
      text-align: left;
      padding: 15px 55px;
    }
    .pay-box {
      ul {
        display: flex;
        margin: 0 50px;
        .ali-pay {
          display: block;
          margin: 5px 10px;
          width: 150px;
          height: 50px;
          border: 1px solid #ccc;
          cursor: pointer;
          &.checked {
            border: 1px solid #ff6700;
          }
          img {
            width: 130px;
            height: 40px;
            margin: 3px auto;
          }
        }
        .weixin-pay {
          display: block;
          margin: 5px 10px;
          width: 150px;
          height: 50px;
          border: 1px solid #ccc;
          cursor: pointer;
          &.checked {
            border: 1px solid #ff6700;
          }
          img {
            width: 130px;
            height: 40px;
            margin: 3px auto;
          }
        }
      }
    }
  }
}
</style>